<template>
  <div class="data-collect-content">
    <div class="data-collect-content__left">
      <page>
        <template slot="title">条码信息</template>
        <p-form>
          <p-form-item label="SN/PN码">
            <p-input :value="snpn" read-only />
          </p-form-item>
          <p-form-item label="关键件条码">
            <p-input v-model.trim="code" @pressEnter="onCodeChange" />
          </p-form-item>
        </p-form>
        <div class="operator text-right">
          <p-button
            :disabled="collectData.length === 0"
            type="primary"
            @click="bind"
            >绑定</p-button
          >
          <p-button class="ml10" type="primary" @click="reload"
            >重新开始</p-button
          >
        </div>
      </page>
      <page class="flex1 mt20">
        <template slot="title">当前采集记录</template>
        <p-table
          size="middle"
          bordered
          rowKey="id"
          :pagination="false"
          :columns="columns"
          :dataSource="dataSource"
          :loading="loading"
        >
          <template slot="result" slot-scope="text">
            <p-tag v-if="text" color="green">采集成功</p-tag>
            <p-tag v-else color="gray">未采集</p-tag>
          </template>
        </p-table>
      </page>
    </div>
    <div flex="auto" class="data-collect-content__right">
      <page>
        <template slot="title">关键件采集详情</template>
        <div class="table-page-search-wrapper">
          <p-form layout="inline">
            <p-row :gutter="24">
              <p-col :xl="8" :sm="12">
                <p-form-item label="工序工单">
                  <p-input :value="orderItem.processBillNo" disabled />
                </p-form-item>
              </p-col>
              <p-col :xl="8" :sm="12">
                <p-form-item label="产品编码">
                  <p-input :value="orderItem.productCode" disabled />
                </p-form-item>
              </p-col>
              <p-col :xl="8" :sm="12">
                <p-form-item label="产品描述">
                  <p-input :value="orderItem.productName" disabled />
                </p-form-item>
              </p-col>
            </p-row>
          </p-form>
        </div>
        <p-row :gutter="14">
          <p-col :sm="8">
            <div class="product-execu-amount product-execu-amount__primary">
              <p-statistic :value="dataSource.length" title="关键件数量" />
            </div>
          </p-col>
          <p-col :sm="8">
            <div class="product-execu-amount product-execu-amount__pending">
              <p-statistic
                :value="dataSource.length - finished"
                title="待采集数量"
              />
            </div>
          </p-col>
          <p-col :sm="8">
            <div class="product-execu-amount product-execu-amount__collected">
              <p-statistic :value="finished" title="已采集数量" />
            </div>
          </p-col>
        </p-row>
      </page>
      <page class="flex1 mt20" style="padding-top: 0">
        <p-tabs v-model="tab" @change="onTabChange">
          <p-tab-pane key="bind" tab="绑定记录">
            <essential-bind
              ref="bind"
              :processBillNo="orderItem.processBillNo"
            />
          </p-tab-pane>
          <p-tab-pane key="replace" tab="关键件替换记录">
            <essential-replace
              ref="replace"
              :processBillNo="orderItem.processBillNo"
            />
          </p-tab-pane>
        </p-tabs>
      </page>
    </div>
  </div>
</template>

<script>
import mixins from "./mixins";
import OrderDetail from "../../productionExecution/components/order-detail";
import { getAction, postAction } from "@/api/manage";

export default {
  mixins: [mixins],
  components: {
    OrderDetail,
    EssentialBind: () => import("./essential-bind"),
    EssentialReplace: () => import("./essential-replace"),
  },
  data() {
    return {
      orderItem: {},
      loading: false,
      dataSource: [],
      collectData: [],
      routerType: {},
      finished: 0,
      tab: "bind",
      code: "",
      snpn: "",
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        pageSizeOptions: ["10", "20", "30"],
        showSizeChanger: true,
        onChange: (current) => {
          this.pagination.current = current;
          this.getFinishData();
        },
        onShowSizeChange: (current, pageSize) => {
          this.pagination.pageSize = pageSize;
          this.pagination.current = 1;
          this.getFinishData();
        },
      },
      columns: [
        {
          title: "序号",
          dataIndex: "rowIndex",
          width: 50,
          align: "center",
          customRender(text, record, index) {
            return index + 1;
          },
        },
        {
          title: "关键物料编码",
          align: "center",
          dataIndex: "mcode",
        },
        {
          title: "关键物料描述",
          align: "center",
          dataIndex: "mname",
        },
        {
          title: "采集结果",
          align: "center",
          dataIndex: "result",
          scopedSlots: {
            customRender: "result",
          },
        },
      ],
    };
  },
  methods: {
    //获得工艺路线编码和工单
    getInfo() {
      if (!this.params.stationCode) {
        this.$message.error("请选择工站");
      }
      getAction("/mes-manufacture/mfBindingRecord/getBindingRecordShowInfo", {
        barCode: this.barCode,
        stationCode: this.params.stationCode,
      }).then((res) => {
        if (res.success) {
          this.orderItem = res.data;
          this.getData();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //获得采集记录表
    getData() {
      this.loading = true;
      const params = {
        processCode: this.params.stationCode,
        routerCode: this.orderItem.routeCode,
        version: this.orderItem.routeVersion,
        type: 0,
      };
      postAction(
        "/mes-craft/craft/mesPeProcessRoute/getBomInfoByCode",
        params
      ).then((res) => {
        this.loading = false;
        if (res.success) {
          const data = res.data;
          data.forEach((item) => {
            item.result = false;
          });
          this.resetData(data);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    resetData(data = []) {
      this.finished = 0;
      this.collectData = [];
      this.dataSource = data;
    },
    onTabChange(key) {
      if (this.$refs[key] && this.$refs[key].getData) {
        this.$refs[key].getData();
      }
    },
    onCodeChange() {
      if (!this.code) {
        return;
      }
      const item = this.dataSource.find((item) => item.mcode === this.code);
      if (item) {
        const collect = this.collectData.find(
          (item) => item.mcode === this.code
        );
        if (collect) {
          this.$message.warning("该条码已被扫描");
        } else {
          item.result = true;
          this.finished++;
          this.collectData.push({
            barCode: this.code,
            bindQty: 1,
            meterialCode: item.mcode,
            meterialName: item.mname,
          });
        }
      } else {
        this.$message.error("关键件不存在");
      }
    },
    reload() {
      this.code = "";
      this.snpn = "";
      this.collectData = [];
      this.finished = 0;
      this.$emit("reset");
    },
    bind() {
      const item = this.dataSource.find((item) => !item.result);
      if (item) {
        this.$message.warning("该工单未全部采集完成");
      } else {
        let params = {
          barCode: this.snpn,
          items: this.collectData,
          processBillNo: this.orderItem.processBillNo,
          stationCode: this.topForm.stationCode,
        };
        postAction(
          "/mes-manufacture/mfBindingRecord/saveBindingRecord",
          params
        ).then((res) => {
          if (res.data) {
            this.$message.success("关键件绑定完成");
            this.onTabChange("bind");
            this.$emit("reset");
          } else {
            this.$message.error(res.msg);
          }
        });
      }
    },
    setData(scanResults, scanOrders) {
      if (scanResults.length === 1) {
        this.snpn = scanResults[0] || "";
        this.getInfo();
      }
      this.code =
        scanResults.length >= 2 ? scanResults[scanResults.length - 1] : "";
      this.onCodeChange();
    },
  },
};
</script>
